<template>
	<view class="newHouse">
		<!-- 搜索 -->
		<searchTop :key='key'></searchTop>
		<!-- 分类 -->
		<view class="list">
			<view class="item" v-for="(item, index) in List" :key="index">
				<view class="flex data" @click="detail(item.id)">
					<image class="head" :src="item.image" mode=""></image>
					<view class="name">
						<view class="color_2 font_14">{{item.name}}</view>
						<view class="color_6 font_13">{{item.store}}</view>
					</view>
				</view>
				<view class="phone">
					<image @click="getphone(item.phone)" src="../../static/imgs/ic_message_call_phone.png" mode=""></image>
					<image src="../../static/imgs/ic_message_send_chat.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchTop from '@/components/searchTop.vue'
	export default {
		components: {
			searchTop
		},
		data() {
			return {
				key: '',
				List: [{
					'image': '../../static/imgs/ic_home_menu_floor_all.png',
					'name': '全部楼盘',
					'store': '新一中店',
					'id': '41',
					'phone': '15236587451'
				}, {
					'image': '../../static/imgs/ic_home_menu_floor_all.png',
					'name': '全部楼盘',
					'store': '新一中店',
					id: '41',
					'phone': '15236587451'
				}, {
					'image': '../../static/imgs/ic_home_menu_floor_all.png',
					'name': '全部楼盘',
					'store': '新一中店',
					id: '41',
					'phone': '15236587451'
				}],

			}
		},
		methods: {
			// 拨打电话
			getphone(phone) {
				console.log(phone)
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}

				});
			},

		}
	}
</script>

<style scoped lang="scss">
	.newHouse {
		padding: 0 24upx;
		background: #fff;

		.list {
			.item {
				display: flex;
				justify-content: space-between;
				padding: 24upx 0;
				border-bottom: 1px solid #EEEEEE;

				.data {
					.head {
						width: 72upx;
						height: 72upx;
						border-radius: 50%;
						margin-right: 20upx;
					}
				}

				.phone {
					margin-top: 20upx;

					image {
						width: 56upx;
						height: 56upx;
						margin-left: 24upx;

					}
				}
			}

		}
	}
</style>
